import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import { Carousel, Row, Col, Tabs, Card, Skeleton, Button, Typography } from 'antd';
import { FireOutlined, CrownOutlined, BulbOutlined, ArrowRightOutlined } from '@ant-design/icons';
import MainLayout from '../../components/Layout/MainLayout';
import SearchBox from '../../components/SearchBox';
import HotelCard from '../../components/HotelCard';
import { getRecommendedHotels } from '../../api/hotelApi';
import { Hotel } from '../../api/types';

const { TabPane } = Tabs;
const { Title, Paragraph } = Typography;

// 轮播图容器
const CarouselContainer = styled.div`
  margin-bottom: 40px;

  .ant-carousel .slick-slide {
    height: 460px;
    overflow: hidden;
    border-radius: 12px;
  }

  .carousel-image {
    width: 100%;
    height: 460px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    position: relative;
  }

  .carousel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0.7));
  }

  .carousel-content {
    position: relative;
    z-index: 2;
    color: #fff;
    padding: 0 60px;
    max-width: 600px;
  }

  .carousel-title {
    font-size: 42px;
    font-weight: bold;
    margin-bottom: 16px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.4);
  }

  .carousel-description {
    font-size: 18px;
    margin-bottom: 24px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
    line-height: 1.6;
  }
  
  .carousel-button {
    height: 46px;
    padding: 0 24px;
    font-size: 16px;
    border-radius: 23px;
  }
`;

// 搜索区域
const SearchBoxWrapper = styled.div`
  margin-bottom: 60px;
  margin-top: -60px;
  position: relative;
  z-index: 10;
`;

// 内容区域
const ContentSection = styled.section`
  margin-bottom: 60px;
`;

// 区域标题
const SectionTitle = styled.h2`
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 30px;
  position: relative;
  padding-left: 18px;
  
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 6px;
    height: 28px;
    background-color: #1890ff;
    border-radius: 3px;
  }
`;

// 特色城市区域
const CityCard = styled(Card)`
  height: 180px;
  margin-bottom: 24px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-radius: 12px;
  border: none;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.7));
    transition: all 0.3s;
  }
  
  .city-name {
    position: absolute;
    left: 20px;
    bottom: 20px;
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    z-index: 2;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  }
  
  .hotel-count {
    position: absolute;
    right: 20px;
    bottom: 20px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    z-index: 2;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  }
  
  &:hover {
    transform: scale(1.05);
    transition: all 0.3s;
    
    &::before {
      background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.8));
    }
  }
`;

// 自定义Tabs样式
const StyledTabs = styled(Tabs)`
  .ant-tabs-nav::before {
    border-bottom: none;
  }
  
  .ant-tabs-tab {
    font-size: 16px;
    padding: 12px 20px;
    margin: 0 10px 0 0;
  }
  
  .ant-tabs-tab-active {
    font-weight: 600;
  }
  
  .ant-tabs-ink-bar {
    height: 3px;
    border-radius: 3px;
  }
`;

// 定义图片数据
const bannerImages = [
  {
    id: 1,
    imageUrl: 'https://images.unsplash.com/photo-1496417263034-38ec4f0b665a',
    title: '特价酒店，低至5折',
    description: '精选全国热门城市高品质酒店，享受超值优惠价格。立即探索我们的特价礼遇，开启难忘旅程！',
    linkUrl: '/hotels?promotion=special'
  },
  {
    id: 2,
    imageUrl: 'https://images.unsplash.com/photo-1542314831-068cd1dbfeeb',
    title: '豪华度假酒店',
    description: '精选全球顶级度假酒店，尊享奢华假期。独特的建筑设计，贴心的服务，让您拥有难忘的住宿体验。',
    linkUrl: '/hotels?category=luxury'
  },
  {
    id: 3,
    imageUrl: 'https://images.unsplash.com/photo-1566073771259-6a8506099945',
    title: '商旅精选',
    description: '为您的商务旅行提供舒适便捷的住宿选择。位置优越，设施齐全，助您高效出行，取得商业成功。',
    linkUrl: '/hotels?category=business'
  }
];

// 特色城市数据
const featuredCities = [
  { id: 1, name: '上海', count: 2345, imageUrl: 'https://images.unsplash.com/photo-1536599424071-0b215a388ba7' },
  { id: 2, name: '北京', count: 1987, imageUrl: 'https://images.unsplash.com/photo-1599571234909-29ed5d1321d6' },
  { id: 3, name: '广州', count: 1243, imageUrl: 'https://images.unsplash.com/photo-1522547902298-51566e4fb383' },
  { id: 4, name: '深圳', count: 1145, imageUrl: 'https://images.unsplash.com/photo-1545893835-1cbd678e3689' },
  { id: 5, name: '成都', count: 1024, imageUrl: 'https://images.unsplash.com/photo-1617176086955-987eac3cafe0' },
  { id: 6, name: '杭州', count: 987, imageUrl: 'https://images.unsplash.com/photo-1595784446604-310f7889f782' },
  { id: 7, name: '三亚', count: 567, imageUrl: 'https://images.unsplash.com/photo-1542640244-7e672d6cef4e' },
  { id: 8, name: '西安', count: 542, imageUrl: 'https://images.unsplash.com/photo-1593019612399-99fe34f63836' }
];

const HomePage: React.FC = () => {
  const [hotels, setHotels] = useState<{
    recommended: Hotel[];
    trending: Hotel[];
    deals: Hotel[];
    loading: boolean;
  }>({
    recommended: [],
    trending: [],
    deals: [],
    loading: true
  });

  // 获取酒店数据
  useEffect(() => {
    const fetchHotels = async () => {
      try {
        // 在实际应用中，这里应该是三个不同的请求
        const recommendedResponse = await getRecommendedHotels(undefined, 6);
        const trendingResponse = await getRecommendedHotels(undefined, 6);
        const dealsResponse = await getRecommendedHotels(undefined, 6);
        
        setHotels({
          recommended: recommendedResponse.data,
          trending: trendingResponse.data,
          deals: dealsResponse.data,
          loading: false
        });
      } catch (error) {
        console.error('获取酒店数据失败', error);
        setHotels(prev => ({ ...prev, loading: false }));
      }
    };

    fetchHotels();
  }, []);

  // 处理城市点击
  const handleCityClick = (cityName: string) => {
    window.location.href = `/hotels?city=${encodeURIComponent(cityName)}`;
  };

  // 渲染酒店卡片
  const renderHotelCards = (hotelList: Hotel[]) => {
    if (hotels.loading) {
      return Array(6).fill(0).map((_, index) => (
        <Col key={index} xs={24} sm={24} md={12} lg={8} xl={8}>
          <Card style={{ marginBottom: 20 }}>
            <Skeleton active avatar paragraph={{ rows: 4 }} />
          </Card>
        </Col>
      ));
    }

    return hotelList.map(hotel => (
      <Col key={hotel.id} xs={24} sm={24} md={12} lg={8} xl={8}>
        <HotelCard hotel={hotel} />
      </Col>
    ));
  };

  return (
    <MainLayout>
      <CarouselContainer>
        <Carousel autoplay effect="fade">
          {bannerImages.map(banner => (
            <div key={banner.id}>
              <div 
                className="carousel-image" 
                style={{ backgroundImage: `url(${banner.imageUrl})` }}
              >
                <div className="carousel-overlay"></div>
                <div className="carousel-content">
                  <h2 className="carousel-title">{banner.title}</h2>
                  <p className="carousel-description">{banner.description}</p>
                  <Button 
                    type="primary" 
                    size="large" 
                    className="carousel-button"
                    href={banner.linkUrl}
                  >
                    立即探索 <ArrowRightOutlined />
                  </Button>
                </div>
              </div>
            </div>
          ))}
        </Carousel>
      </CarouselContainer>

      <SearchBoxWrapper>
        <SearchBox />
      </SearchBoxWrapper>

      <ContentSection>
        <SectionTitle>特色城市</SectionTitle>
        <Row gutter={24}>
          {featuredCities.map(city => (
            <Col key={city.id} xs={24} sm={12} md={8} lg={6} xl={6}>
              <CityCard
                cover={
                  <div 
                    style={{ 
                      height: 180, 
                      backgroundImage: `url(${city.imageUrl})`,
                      backgroundSize: 'cover'
                    }}
                  >
                    <div className="city-name">{city.name}</div>
                    <div className="hotel-count">{city.count}家酒店</div>
                  </div>
                }
                bodyStyle={{ display: 'none' }}
                onClick={() => handleCityClick(city.name)}
              />
            </Col>
          ))}
        </Row>
      </ContentSection>

      <ContentSection>
        <SectionTitle>热门酒店</SectionTitle>
        <StyledTabs defaultActiveKey="recommended">
          <TabPane
            tab={<span><CrownOutlined />精选推荐</span>}
            key="recommended"
          >
            <Row gutter={24}>
              {renderHotelCards(hotels.recommended)}
            </Row>
          </TabPane>
          <TabPane
            tab={<span><FireOutlined />热门酒店</span>}
            key="trending"
          >
            <Row gutter={24}>
              {renderHotelCards(hotels.trending)}
            </Row>
          </TabPane>
          <TabPane
            tab={<span><BulbOutlined />特价优惠</span>}
            key="deals"
          >
            <Row gutter={24}>
              {renderHotelCards(hotels.deals)}
            </Row>
          </TabPane>
        </StyledTabs>
      </ContentSection>
    </MainLayout>
  );
};

export default HomePage; 